<template>
  <label class="file-uploads" :class="'file-uploads'" :style="{fontSize: isBold ? 'bold' : 'normal'}">
    <i class="iconfont icon-lianjie" v-if="button === 'normal'" v-tooltip="'上传文件'"></i>
    <span class="tip-lianjie" v-if="isTip">{{updateTip}}</span>
    <span v-if="button === 'text'">{{updateTip}}</span>
    <div class="add-com"
         :style="{width: width, height: height, 'line-height': height}"
         v-else-if="button === 'plus'">
      <i class="iconfont icon-plus" ></i>
    </div>
    <slot name="alone"></slot>
    <slot name="img"></slot>
    <InputFile></InputFile>
  </label>
</template>

<script>
  import Vue from 'vue'
  import InputFile from './InputFile.vue'
  import { mapGetters } from 'vuex'
  import oss from '../mixin.js'
  import base64 from '../base.js'
  export default {
    name: 'zz-upload',
    mixins: [oss, base64],
    components: {
      InputFile
    },
    props: {
      // 是否关闭上传
      closeUpload: {
        type: Boolean,
        default: false
      },
      width: {
        type: String,
        default: '50px'
      },
      height: {
        type: String,
        default: '50px'
      },
      button: {
        type: String,
        default: 'normal'
      },
      // 是否允许上传多个文件
      multiple: {
        type: Boolean,
        default: true
      },
      // chrome 浏览器可以上传 整个目录
      directory: {
        type: Boolean,
        default: false
      },
      // 允许上传最大文件
      size: {
        type: Number,
        default: 1073741824
      },
      // 允许上传最多文件
      length: {
        type: Number,
        default: 8
      },
      // 允许上传文件类型,
      type: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 是否显示提示
      isTip: {
        type: Boolean,
        default: true
      },
      isBold: {
        type: Boolean,
        default: false
      },
      updateTip: {
        type: String,
        default: '图片/文件'
      },
      subSystem: {
        type: Number,
        default: 2 // 上传方 1：CCBIM 2：公司内部 3 第三方
      },
      fileOwnerType: {
        type: Number,
        default: 2 // 上传人 1：个人 2：企业
      },
      propsFiles: {
        type: Array,
        default: function () {
          return []
        }
      }
    },

    data () {
      return {
        input: false,
        isChecked: false, // 是否使用切片上传true就是使用
        chunkSize: 5 * 1024 * 1024, // 切片阀值大小10M
        uploadFiles: []
      }
    },
    watch: {
      uploadFiles: {
        handler: function (files) {
          this.$emit('updateFile', files)
        },
        deep: true
      },
      propsFiles (files) {
        this.setFiles(files)
      }
    },
    // 挂载后
    mounted () {
      Vue.prototype.$fileUpload = this
      this.$parent.$forceUpdate()
    },

    // 销毁前
    beforeDestroy () {
      this.files = []
    },

    computed: {
      ...mapGetters({
        getRemoveFile: 'getRemoveFile',
        getChangeFileCnt: 'getChangeFileCnt',
        resetState: 'getResetState',
        editFiles: 'getEditFiles',
        resetFile: 'getResetFile'
      })
    },

    methods: {
      // 添加表单文件
      addInputFile (event) {
        if (this.closeUpload) {
          this.$message.warning(`你不能操作或没有权限`)
          return false
        }
        if (!this.multiple) {
          this.uploadFiles = []
        }
        const {files} = event.target
        this.addFiles(files, event.target)
      },

      addFiles (files, target) {
        this.filter(files).then(() => {
          this.continueUpload(files, null, target)
        })
      },

      async setFiles (files) {
        const loadData = data => new Promise(resolve => {
          if (data.type === 1) {
            Vue.prototype.$store.dispatch({
              type: 'downFile',
              fileUuid: data.fileUuid,
              th: 1
            }).then(res => {
              data.blob = res
              data.fileType = 1
              resolve(data)
            })
          } else {
            resolve(data)
          }
        })
        const arr = []
        for (let i = 0; i < files.length; i++) {
          const data = await loadData(files[i])
          arr.push(data)
        }
        this.uploadFiles = arr.map((file) => {
          file.id = Math.random().toString(36).substr(2)
          const icon = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase()
          file.bgColor = this.$IconColor(this.setFileIcon(icon))
          file.success = true
          file.edit = true
          file.fileIcon = this.setFileIcon(file.url)
          return file
        })
      },

      getFileUUID () {
        return new Promise(resolve => {
          if (this.uploadFiles.every((file) => file.success)) {
            const fileUuids = this.uploadFiles.map(item => item.fileUuid)
            this.uploadFiles = []
            resolve(fileUuids)
          } else {
            this.$message.warning('还有文件上传中，请稍后')
          }
        })
      },

      removeFiles () {
        this.uploadFiles = []
      }
    }
  }
</script>

<style lang="scss">
  .file-uploads {
    position: relative;
    display: inline-block;
    cursor: pointer;
    .icon-lianjie{
      font-size: $font-size-large;
      &:hover{
        color: $color;
      }
    }
    .tip-lianjie{
      margin-top: 1px;
      display: inline-block;
      font-size: $font-size-smallest;
      vertical-align: text-top;
      &:hover{
        color: $color;
      }
    }
    .add-com{
      text-align: center;
      line-height: 50px;
      border: 1px $color-line dashed;
      color: $color-grid;
      margin-bottom: 10px;
      &:hover{
        color: $color;
        border: 1px $color dashed;
      }
      .icon-plus{
        font-size: 1.5rem;
      }
    }

  }
  .file-uploads input[type="file"] {
    overflow: hidden;
    position: fixed;
    width: 1px;
    height: 1px;
    top: -99em;
  }
</style>
